
<template>
  <div id="building">

  </div>
  <a-form
      :model="formState"
      name="normal_login"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      style="max-width: 500px;margin-left: 500px;margin-top: 100px"
  >
    <a-form-item
        label="phone"
        name="phone"
        :rules="[{ required: true, message: 'Please input your username!' }]"
        style="font-weight :600;"
    >
      <a-input v-model:value="formState.phone">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
        style="font-weight :600;"

    >
      <a-input-password v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item>
<!--      <a-form-item name="remember" no-style>-->
<!--        <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>-->
<!--      </a-form-item>-->
<!--      <span style="margin-right: 20px">-->
<!--              <a class="login-form-forgot" href="" style="font-weight :600;"-->
<!--              >忘记密码</a>-->
<!--      </span>-->
      <span style="margin-right: 20px">
              <a  class="login-form-forgot" @click="showRegisterModal"style="font-weight :600; color: black">注册新用户</a>
      </span>
      <a  class="login-form-forgot" @click="showSendMailModal"style="font-weight :600;color: black">验证码登录</a>

    </a-form-item>

    <a-form-item>
      <a-button  type="primary" html-type="submit" class="login-form-button" @click="handleOk"
                style="font-weight :600;"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
  <a-modal v-model:visible="sendMailModalVisible" title="验证码登录" @ok="handleOk" @cancel="handleCancel">
    <a-form
        :model="formState"
        name="mail_login"
        class="login-form"
    >
      <a-form-item
          label="输入电话号码"
          name="phone"
          :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.phone"></a-input>
        <a @click="sendMail">发送验证码</a>
      </a-form-item>
      <a-form-item
          label="输入验证码"
          name="code"
      >
        <a-input v-model:value="formState.password"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="registerFormVisible" title="注册" @ok="doRegister" @cancel="handleCancel">
    <a-form
        :model="registerForm"
        name="register"
        class="login-form"
    >
      <a-form-item
          label="电话号码"
          name="phone"
      >
        <a-input v-model:value="registerForm.phone"></a-input>
        <a @click="sendMail">发送验证码</a>
      </a-form-item>
      <a-form-item
          label="输入验证码"
          name="code"
      >
        <a-input v-model:value="registerForm.code"></a-input>
      </a-form-item>
      <a-form-item
          label="输入密码"
          name="password"
      >
        <a-input v-model:value="registerForm.password"></a-input>
      </a-form-item>
      <a-form-item
          label="确认密码"
          name="passwordConfirm"
      >
        <a-input v-model:value="registerForm.passwordConfirm"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="checkNewUserVisible" title="新用户请设置初始密码" @ok="setPassword" @cancel="setPassword"
  :mask-closable="false" :cancel-button-props="{style:{display:'none'}}">
    <a-form
        :model="registerForm"
        name="register"
        class="login-form"
    >
      <a-form-item
          label="输入密码"
          name="password"
      >
        <a-input v-model:value="registerForm.password"></a-input>
      </a-form-item>
      <a-form-item
          label="确认密码"
          name="passwordConfirm"
      >
        <a-input v-model:value="registerForm.passwordConfirm"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import {defineComponent, reactive, computed, ref, getCurrentInstance, onMounted} from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import axios from "axios";
import {isReturnTrue, reload} from "@/util/util";
import store from "@/store";
import router from "@/router";
import {MailTypeEnum} from '@/enum/enum'
import {useRouter} from 'vue-router'
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    const router=useRouter();
    const registerForm=reactive({
      phone:'',
      code:'',
      password:'',
      passwordConfirm:''
    });
    const userInfo={
      phone:'',
      nickName:'',
      token:'',
      isNewUser:''
    };
    const sendMailModalVisible = ref(false);
    const registerFormVisible=ref(false);
    const checkNewUserVisible=ref(false);
    const showSendMailModal = () => {
      formState.phone=null
      formState.password=null
      sendMailModalVisible.value = true;
      console.log("验证码页面已打开")
    };const showRegisterModal = () => {
      registerForm.phone=null
      registerForm.code=null
      registerForm.password=null
      registerForm.passwordConfirm=null
      registerFormVisible.value = true;
      console.log("注册页面已打开")
    };
    const handleOk = e => {
      let mailOrPassword=sendMailModalVisible.value?"mailLogin":"passwordLogin";
      let isMail=sendMailModalVisible.value;
      let _userInfo=userInfo;
      if(formState.phone==null||formState.phone.length==0){
        alert("请填写手机号");
        return;
      }
      if(formState.password==null||formState.password.length==0){
        alert(isMail?"验证码为空":"密码为空");
        return;
      }
      let isNewUser=false;
      axios.get("/core/sys-user/login/"+mailOrPassword+"/"+formState.phone+"/"+formState.password).then((response)=>{
        if(isReturnTrue(response.data.code)){
          _userInfo=response.data.data;
          store.commit("setUserInfo",JSON.stringify(_userInfo));
          console.log("token"+store.state.userInfo);
          sendMailModalVisible.value = false;
          // if(isMail){
          //   axios.get("/core/sys-user/checkFirstTimeLogin?phone="+formState.phone).then((response)=>{
          //     if(isReturnTrue(response.data.code)){
          //       isNewUser=response.data.data;
          //       //打开新表单，新用户设置密码
          //       registerForm.phone=formState.phone
          //       checkNewUserVisible.value=true;
          //       router.push('/menu');
          //     }
          //     else{
          //       alert(response.data.message);
          //       return;
          //     }
          //   })
          // }
          console.log("登录成功")
          router.push({path:'/menu'});
        }
        else{
          alert(response.data.message);
          return;
        }
      })
    };
    const handleCancel=e=>{
      formState.phone=null;
      formState.password=null;
      registerForm.phone=null;
      registerForm.password=null;
      registerForm.code=null;
      registerForm.passwordConfirm=null;
      registerFormVisible.value=false;
      sendMailModalVisible.value=false;
    }
    const formState = reactive({
      phone: '',
      password: '',
      remember: true,
    });
    const onFinish = values => {
      console.log('Success:', values);
    };
    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    const disabled = computed(() => {
      return !(formState.phone && formState.password);
    });
    const sendMail=()=>{
      let mailType='';
      let _phone=''
      if(sendMailModalVisible.value){
        mailType=MailTypeEnum.login;
        _phone=formState.phone
      }
      else if(registerFormVisible.value){
        mailType=MailTypeEnum.register;
        _phone=registerForm.phone
      }
      axios.get("/core/sys-user/sendMail/"+mailType+"?phone="+_phone).then((response)=>{
        console.log(response.data.code)
        if(isReturnTrue(response.data.code)){
          alert("发送成功");
        }else{
          alert(response.data.message)
        }
      });
    };
    const doRegister=()=>{
      axios.post("/core/sys-user/register",registerForm).then((response)=>{
        if(isReturnTrue(response.data.code)){
          alert("注册成功");
          handleCancel();
          return;
        }
        else{
          alert(response.data.message);
        }
      });
    };
    const isLogin=()=>{
      const userInfo=localStorage.getItem("USERINFO")
      if(userInfo!=null&&userInfo!=''&&userInfo!='null'){
        router.push('/menu')
      }
    }
    onMounted(()=>{
      isLogin()
      reload()
    });
    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
      sendMailModalVisible,
      showSendMailModal,
      handleOk,
      handleCancel,
      sendMail,
      userInfo,
      registerFormVisible,
      registerForm,
      showRegisterModal,
      doRegister,
      checkNewUserVisible,
      isLogin
    };

  },
});
</script>
<style>
#components-form-demo-normal-login .login-form {
  max-width: 200px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
#building{
  /*background:url("../assets/menu.png");*/
  /*width:100%;*/
  /*height:100%;*/
  /*position: absolute;*/
  /*background-size: cover;*/
  /*z-index: -1;*/
  /*background-repeat: no-repeat;*/
  /*position:fixed;*/
  /*background-size:100% 100%;*/
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-image: url('../assets/menu.png');
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
}

</style>